<template>
  <div
    class="statusBar"
    :style="{
      height: this.statusBarHeight + 'px',
    }"
  ></div>
</template>
<script>
import {
  setStatuBarHeightListener,
  getStatusBarHeight,
} from "../../../assets/js/device.js";
export default {
  data() {
    return {
      statusBarHeight: 20,
      statusBarColor: "rgba(0,0,0,0)",
    };
  },
  created() {
    //设置页面状态栏高度的监听器
    setStatuBarHeightListener(this.updateStatusBarHeight);
    //获取状态栏高度
    getStatusBarHeight();
  },
  mounted() {},
  watch: {},
  methods: {
    updateStatusBarHeight(height) {
      this.statusBarHeight = height;
    },
  },
};
</script>
<style scoped>
.statusBar {
  background: var(--current-background-color);
}
</style>
